<!-- 轮播图 -->
<template>
	<view class="container">
		<swiper class="swiper" circular indicator-dots autoplay>
			<swiper-item class="swiper-item" v-for="(path,index) in list" :key="index">
				<image class="banner" :src="path" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view class="btn-group">
			<button class="btn iconfont btn-transition-scale9" :class="{'active': isCollect}"
				@click="handleChangeCollet()">{{isCollect? '&#xe618;': '&#xe61d;'}}
			</button>
			<button class="btn iconfont btn-transition-scale9" open-type="share">&#xe61c;</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const list = ref([
		'/pagesC-shopping/static/images/will-delete/08.png',
		'/pagesC-shopping/static/images/will-delete/08.png',
		'/pagesC-shopping/static/images/will-delete/08.png'
	]);

	const isCollect = ref(false);

	const handleChangeCollet = () => {
		isCollect.value = !isCollect.value;
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.swiper {
			width: 100vw;
			height: 100vw;

			&-item {
				width: inherit;
				height: inherit;

				.banner {
					width: inherit;
					height: inherit;
				}
			}
		}

		.btn-group {
			position: absolute;
			top: 25rpx;
			right: 30rpx;
			display: flex;

			.btn {
				width: 58rpx;
				height: 58rpx;
				font-size: 40rpx;
				color: white;
				text-align: center;
				line-height: 58rpx;
				background-color: rgba(0, 0, 0, 0.38);
				border-radius: 50%;

				&+.btn {
					margin-left: 24rpx;
				}

				&.active {
					color: #FE3333;
				}
			}
		}
	}
</style>